<template>
  <div class="cycle-plan-container">
    <div class="header">
      <!-- <h1>周期计划</h1> -->
      <div class="actions">
        <!-- <button @click="showAddPlanModal = true" class="add-plan-btn">
          <span>+</span> 添加计划
        </button> -->
        <label class="show-completed">
          <input type="checkbox" v-model="showCompleted" />
          显示已完成
        </label>
      </div>
    </div>

    <div v-if="plans.length === 0" class="no-plan">
      <h2>暂无计划</h2>
    </div>

    <!-- <div class="plan-categories">
      <div class="category">
        <h3>课程题库</h3>
        <div class="sub-category">竞赛题库</div>
      </div>
    </div> -->

    <div class="plan-list" >
      <div class="plan-header">
        <div class="header-item">编号</div>
        <div class="header-item">测验/试卷</div>
        <div class="header-item">难度</div>
        <div class="header-item">正确率</div>
        <div class="header-item">做题人数</div>
        <div class="header-item">操作</div>
      </div>

      <div 
        v-for="(plan, index) in filteredPlans" 
        :key="plan.id" 
        class="plan-item" 
        :class="{ completed: plan.completed }"
      >
        <div class="plan-cell">{{ index + 1 }}</div>
        <div class="plan-cell plan-title">
          <div>{{ plan.title }}</div>
          <div class="plan-meta">
            关联课程：{{ plan.course }} 章节：{{ plan.chapter }}
          </div>
        </div>
        <div class="plan-cell">{{ plan.difficulty }}</div>
        <div class="plan-cell">{{ plan.correctRate }}</div>
        <div class="plan-cell">{{ plan.participants }}</div>
        <div class="plan-cell actions" style="text-align: center;">
          <button 
            @click="togglePlanCompletion(plan.id)" 
            class="complete-btn"
            :class="{ completed: plan.completed }"
          >
            {{ plan.completed ? '✓' : '标记完成' }}
          </button>
          <button @click="removePlan(plan.id)" class="remove-btn">删除</button>
        </div>
      </div>
    </div>

    <!-- 添加计划模态框 -->
    <div v-if="showAddPlanModal" class="modal-overlay">
      <div class="modal">
        <h2>添加新计划</h2>
        <form @submit.prevent="addNewPlan">
          <div class="form-group">
            <label>标题</label>
            <input v-model="newPlan.title" type="text" required />
          </div>
          <div class="form-group">
            <label>关联课程</label>
            <input v-model="newPlan.course" type="text" required />
          </div>
          <div class="form-group">
            <label>章节</label>
            <input v-model="newPlan.chapter" type="text" required />
          </div>
          <div class="form-group">
            <label>难度</label>
            <select v-model="newPlan.difficulty">
              <option value="简单">简单</option>
              <option value="中等">中等</option>
              <option value="困难">困难</option>
              <option value="满分">满分</option>
            </select>
          </div>
          <div class="form-actions">
            <button type="button" @click="showAddPlanModal = false">取消</button>
            <button type="submit">添加</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';

interface Plan {
  id: number;
  title: string;
  course: string;
  chapter: string;
  difficulty: string;
  correctRate: string;
  participants: string;
  completed: boolean;
}

export default defineComponent({
  name: 'CyclePlan',
  setup() {
    const showAddPlanModal = ref(false);
    const showCompleted = ref(false);
    const nextPlanId = ref(6); // 初始ID从6开始，因为下面有5个示例

    const newPlan = ref<Omit<Plan, 'id' | 'completed'>>({
      title: '',
      course: '',
      chapter: '',
      difficulty: '简单',
      correctRate: '0%',
      participants: '开始次数',
    });

    const plans = ref<Plan[]>([
      {
        id: 1,
        title: 'vue第一次测验',
        course: '创建分数线，MySQL',
        chapter: 'MySQL入门与交流站',
        difficulty: '满分',
        correctRate: '0%',
        participants: '开始次数',
        completed: false,
      },
      {
        id: 2,
        title: 'Linux环境下通过VUM安装MySQL',
        course: '创建分数线，MySQL',
        chapter: 'MySQL入门与交流站',
        difficulty: '满分',
        correctRate: '0%',
        participants: '开始次数',
        completed: false,
      },
      {
        id: 3,
        title: 'macOS使用Homebrew安装MySQL',
        course: '创建分数线，MySQL',
        chapter: 'MySQL入门与交流站',
        difficulty: '满分',
        correctRate: '0%',
        participants: '开始次数',
        completed: false,
      },
      {
        id: 4,
        title: 'MySQL初始化安全配置最佳实践',
        course: '创建分数线，MySQL',
        chapter: 'MySQL入门与交流站',
        difficulty: '满分',
        correctRate: '0%',
        participants: '开始次数',
        completed: false,
      },
      {
        id: 5,
        title: '实体关系图(ERD)绘制规范',
        course: '创建分数线，MySQL',
        chapter: '创建分数线计算器',
        difficulty: '满分',
        correctRate: '0%',
        participants: '开始次数',
        completed: false,
      },
    ]);

    const filteredPlans = computed(() => {
      return showCompleted.value 
        ? plans.value 
        : plans.value.filter(plan => !plan.completed);
    });

    const addNewPlan = () => {
      plans.value.push({
        id: nextPlanId.value++,
        ...newPlan.value,
        completed: false,
      });
      newPlan.value = {
        title: '',
        course: '',
        chapter: '',
        difficulty: '简单',
        correctRate: '0%',
        participants: '开始次数',
      };
      showAddPlanModal.value = false;
    };

    const togglePlanCompletion = (id: number) => {
      const plan = plans.value.find(p => p.id === id);
      if (plan) {
        plan.completed = !plan.completed;
      }
    };

    const removePlan = (id: number) => {
      plans.value = plans.value.filter(plan => plan.id !== id);
    };

    return {
      showAddPlanModal,
      showCompleted,
      plans,
      filteredPlans,
      newPlan,
      addNewPlan,
      togglePlanCompletion,
      removePlan,
    };
  },
});
</script>

<style scoped>
.cycle-plan-container {
  font-family: Arial, sans-serif;
  /* max-width: 1200px; */
  margin: 0 auto;
  /* padding: 20px; */
  color: #333;
  height: 100%;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  margin: 0;
}

.actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.add-plan-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 4px 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-plan-btn span {
  font-size: 18px;
}

.show-completed {
  display: flex;
  align-items: center;
  gap: 5px;
}

.no-plan {
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 20px;
}

.no-plan h2 {
  margin: 0;
  color: #666;
}

.plan-categories {
  margin-bottom: 20px;
}

.plan-categories h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.sub-category {
  color: #666;
  font-size: 14px;
}

.plan-list {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.plan-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

.plan-header .header-item {
  padding: 1px 15px;
  flex: 1;
}

.header-item:last-child{
  /* text-align: center; */
  /* margin-right: 100px; */
  /* padding-left: 50px; */
}

.plan-header .header-item:first-child {
  flex: 0.5;
}

.plan-header .header-item:last-child {
  flex: 1.5;
}

.plan-item {
  display: flex;
  border-bottom: 1px solid #ddd;
  align-items: center;
}

.plan-item:last-child {
  border-bottom: none;
}

.plan-item.completed {
  background-color: #f9f9f9;
  color: #999;
}

.plan-item.completed .plan-title {
  text-decoration: line-through;
}

.plan-cell {
  padding: 12px 15px;
  flex: 1;
}

.plan-cell:first-child {
  flex: 0.5;
}

.plan-cell:last-child {
  flex: 1.5;
}

.plan-title {
  display: flex;
  flex-direction: column;
}

.plan-meta {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.actions {
  display: flex;
  gap: 8px;
}

.complete-btn {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.complete-btn.completed {
  background-color: #e8f5e9;
  color: #4CAF50;
  border-color: #4CAF50;
}

.remove-btn {
  background-color: #ffebee;
  border: 1px solid #ef9a9a;
  color: #f44336;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
}

.modal h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.form-actions button {
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button:first-child {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

.form-actions button:last-child {
  background-color: #4CAF50;
  color: white;
  border: none;
}
</style>